<template>
	<view class="mask" v-if="bgflag" @tap="flagB">
		<view class="yinghangka">
			<p>{{text}}</p>
			<view class="main">
				<view v-for="(item,i) in data" :key=i @tap='flagA(item)'>
					<image :src="item.logo" mode="widthFix" v-if="item.logo==''?false:true"></image>
					<view class="lineV"></view>
					<view :id="item.logo==''?'left':''">
						<p>{{item.title}}</p>
						<p style="color: #ababab;">{{item.banknum}}</p>
					</view>
					<span>{{item.bankusername}}</span>
				</view>
			</view>
			<!-- <view class="xuanze">
				<view style="border-right: 1px solid #fff;">取消</view>
				<view @tap="flagA">确认</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		props:{
			text:null,
			data:null,
			bgflag:false
		},
		onLoad() {
			console.log(this.data)
		},
		methods:{
			flagA(item){
				this.$emit('itemObj',item)
				console.log('item='+item.logo)
			},
			flagB(){
				this.$emit('flagB')
			}
		}
	}
</script>

<style lang="scss">
	#left{
		left:20rpx
	}
	#bgflag1{
		background-color: #2cffe0;
		color: #fff;
	}
	.mask{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		color: #fff;
		
	}
	.yinghangka{
		width: 80vw;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: #e2e2e2;
		height: 50vh;
		border-radius: 20px;
		overflow: hidden;
		p{
			width: 100%;
			height: 8vh;
			line-height: 8vh;
			font-size: 30rpx;
			background-color: #009AFF;
		}
		.xuanze{
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 5vh;
			line-height: 5vh;
			background-color: #009AFF;
			view{
				float: left;
				width: 50%;
				height: 100%;
			}
			view:active{
				color: #009AFF;
				background-color: #fff;
				transition: all .5s;
			}
			
		}
		.main{
			width: 100%;
			position: absolute;
			height: 67vh;
			top: 8vh;
			overflow: scroll;
			view{
				// width: 95%;
				// height: 100rpx;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				// margin: 18rpx auto;
				margin: 0 0 0 0;
				overflow: hidden;
				position: relative;
				image{
					width: 40upx;
					height: 40upx;
					position: absolute;
					left: 190upx;
					top: 50%;
					transform: translateY(-50%);
				}
				view{
					height: 100%;
					width: 70%;
					position: absolute;
					top: 0;
					left: 240upx;
					text-align: left;
					line-height: 10px;
					margin: 0;
					p{
						background-color:transparent;
						height: 100%;
						line-height: normal;
						color: #5f5f5f;
						font-size: 25rpx;
						padding-top: 30rpx;
						left: 0upx;
					}
				}
				lineV{
					height: 10upx;
					width: 5upx;
					background-color: #007AFF;
					left: 190rpx;
					top: 30upx;
				}
				span{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 20rpx;
					color: #2c2c2c;
				}
			}
		}
	}
</style>
